<template>
  <main>
    <el-row :gutter="20">
      <el-col :span="16"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <div id="qwe" style="height: 300px"></div>
          </el-card></div
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
      <el-col :span="16"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
    </el-row>
  </main>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

type EChartsOption = echarts.EChartsOption;

var option: EChartsOption;
option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 500, 260, 230, 224, 218, 135, 147, 260],
      type: "line",
    },
  ],
};
onMounted(() => {
  var myChart = echarts.init(document.getElementById("qwe"));
  myChart.setOption(option);
});
</script>

<style scoped>
.el-card{
  height: 300px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  height: 300px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
